import React from "react"; // 引入React库
import ReactDOM from "react-dom/client"; // 引入ReactDOM，用于DOM操作
import { Provider } from "react-redux"; // 引入Provider组件，用于React-Redux的Store提供
import { store } from "@store/index"; // 引入Redux的store
import AppRouter from "@router/index"; // 引入应用的路由配置
import "@styles/base.less"; // 引入基础样式文件
import { Toaster } from "react-hot-toast"; // 引入Toaster组件，用于显示通知
import { PersistGate } from "redux-persist/integration/react"; // 引入PersistGate组件，用于redux-persist的集成
import { persistStore } from "redux-persist"; // 引入persistStore，用于创建持久化的store
import dayjs from "dayjs"; // 引入dayjs库，用于日期处理
import relativeTime from "dayjs/plugin/relativeTime"; // 引入relativeTime插件，用于处理相对时间
import "dayjs/locale/zh-cn"; // 引入中文语言包

dayjs.locale("zh-cn"); // 设置dayjs的语言为中文
dayjs.extend(relativeTime); // 扩展dayjs以使用relativeTime插件

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement // 创建根节点
);

const persistor = persistStore(store); // 创建持久化的store

root.render(
  <Provider store={store}> // 使用Provider包裹应用，使store可在应用中被访问
    <PersistGate persistor={persistor}> // 使用PersistGate包裹应用，控制应用加载时的渲染
      <AppRouter /> // 渲染应用的路由
    </PersistGate>
    <Toaster /> // 渲染Toaster组件
  </Provider>
);